<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴效果</title>
    <style>
        ul,
        h2,
        h3 {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .menu-continer {
            width: 300px;
            background-color: #fff;
        }

        .menu {
            width: 100%;
            /* height: 50px;
            line-height: 50px; */
            color: #fff;
            margin: 10px 0;
            overflow: hidden;
        }

        .menu h2 {
            background-color: #0d9bd5;
            padding-left: 10px;
        }

        .second-menu {
            height: 0;
        }

        /* .hide {
            display: none;
        } */

        .second-menu h3 {
            background-color: aquamarine;
        }

        .second-menu li {
            height: 30px;
            line-height: 30px;
            background-color: #117399;
            margin: 4px 0;
            padding-left: 30px;
        }
    </style>
</head>

<body>
    <ul class="menu-continer">
        <li class="menu">
            <h2>一级菜单1</h2>
            <ul class="second-menu" status="0">
                <li>三级菜单1</li>
                <li>三级菜单2</li>
                <li>三级菜单3</li>
            </ul>
        </li>
        <li class="menu">
            <h2>一级菜单2</h2>
            <ul class="second-menu" status="0">
                <li>三级菜单1</li>
                <li>三级菜单2</li>
                <li>三级菜单3</li>
            </ul>
        </li>
        <li class="menu">
            <h2>一级菜单3</h2>
            <ul class="second-menu" status="0">
                <li>三级菜单1</li>
                <li>三级菜单2</li>
                <li>三级菜单3</li>
            </ul>
        </li>
        <li class="menu">
            <h2>一级菜单4</h2>
            <ul class="second-menu" status="0">
                <li>三级菜单1</li>
                <li>三级菜单2</li>
                <li>三级菜单3</li>
            </ul>
        </li>
    </ul>
    <script src="./animate.js"></script>
    <script>
        var menus = document.querySelectorAll(".menu h2");
        for (let i = 0; i < menus.length; i++) {
            menus[i].onclick = function () {
                var subMenu = this.parentElement.querySelector(".second-menu");
                toggle(subMenu);
            }
        }
        // 打开
        function open(subMenu) {
           // 状态为关闭时，就打开
                createAnimation({
                    from: 0,
                    to: 102,
                    onMove: function (n) {
                        subMenu.style.height = n + 'px';
                        subMenu.setAttribute('status', '3');
                    },
                    onEnd: function () {
                        subMenu.setAttribute('status', '1');
                    }
                });
        }
        function close(subMenu) {
            // 状态为打开时，就关闭
            createAnimation({
                from: 102,
                to: 0,
                onMove: function (n) {
                    subMenu.style.height = n + 'px';
                    subMenu.setAttribute('status', '3');
                },
                onEnd: function () {
                    subMenu.setAttribute('status', '0');
                }
            });
        }

        function toggle(subMenu) {
            // 子菜单状态：打开-1、关闭-0、正在动画中-3
            var status = subMenu.getAttribute('status');
            if (status == '3') {
                return;
            } else if (status == '0') {// 状态为关闭时，就打开
                var beforeOpened = document.querySelector("ul[status='1']");
                if (beforeOpened) close(beforeOpened);
                open(subMenu);
            } else if (status == '1') {// 状态为打开时，就关闭
                close(subMenu);
            }

        }

    </script>
</body>

</html>